<template>
  <div class="x-discover">
    <x-header></x-header>
    <div class="x-discover--wrap">
      <router-view></router-view>
      <div class="x-discover__nav">
        <div class="c-path">
          <div :class="{'c-path--dot': true, active: item.active}"
            v-for="(item, index) in path"
            @click="toPath(item, index)">
            <span class="normal">
              <span class="text">{{ item.text }}</span>
              <i class="normal-icon"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <x-footer></x-footer>
  </div>
</template>

<script>
  import $ from 'jquery'
  import XHeader from '@/components/XHeader'
  import XFooter from '@/components/XFooter'

  const $window = $(window)
  const $document = $(document)

  export default {
    components: {
      XHeader,
      XFooter,
    },
    data() {
      return {
        path: [{
          active: true,
          name: 'shanghai',
          text: 'shanghai',
        }, {
          active: false,
          name: 'chengdu',
          text: 'chengdu',
        }, {
          active: false,
          name: 'chongqing',
          text: 'chongqing',
        }, {
          active: false,
          name: 'qingdao',
          text: 'qingdao',
        }, {
          active: false,
          name: 'xiamen',
          text: 'xiamen',
        }],
        currentIndex: 0, // default shanghai
        routes: ['shanghai', 'chengdu', 'chongqing', 'qingdao', 'xiamen'] // 维护路由的顺序
      }
    },
    methods: {
      initCurrentIndex() {
        const $route = this.$route
        const name = $route.name
        const index = this.routes.indexOf(name)

        if(index !== -1) {
          this.currentIndex = index
        } else { // 如果不存在默认显示第一个吧
          this.currentIndex = 0
        }

        this.toPath({ name }, this.currentIndex)
      },
      toPrev() {
        --this.currentIndex
        const name = this.routes[this.currentIndex]
        this.changeRouteByName(name)
      },
      toNext() {
        ++this.currentIndex
        const name = this.routes[this.currentIndex]
        this.changeRouteByName(name)
      },
      changeRouteByName(name) {
        this.toPath({ name }, this.currentIndex)
        this.$router.replace({
          name
        })
      },
      toPath(item, index) {
        this.currentIndex = index

        const name = item.name
        this.$router.replace({
          name
        })

        this.path.map((p, i) => {
          p.active = i === +index
          return p
        });
      },
    },
    mounted() {
      // 初始化 currentIndex
      this.initCurrentIndex()

      const $router = this.$router
      const total = this.routes.length
      let scrolling = false

      $window.on('scroll.discover', e => {
        e.preventDefault()

        if(!scrolling) {
          scrolling = true

          const winTop = $window.scrollTop()
          const docHeight = $document.height()
          const winHeight = $window.height()

          if(winTop <= 0 && this.currentIndex > 0) { // 顶部
            this.toPrev()
          } else if(winTop + winHeight >= docHeight && this.currentIndex < total - 1) {
            this.toNext()
          }
          scrolling = false
        } else {
          scrolling = false
        }
      })
    },
    destroyed() {
      $window.off('scroll.discover')
    }
  }
</script>

<style lang="scss" scoped>
  .x-discover {
    position: relative;
    height: 100%;
    background: #000;
  }
  .x-discover--wrap {
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
  }

  .x-discover__nav {
    width: 132px;
    background: rgba(115, 0, 0, .7);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
</style>
